{% extends "base.html" %}

{% block title %}邮箱验证 - 个人工具网站集{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header text-center">
                    <h4><i class="fas fa-envelope-open-text"></i> 邮箱验证</h4>
                </div>
                <div class="card-body text-center">
                    <div class="mb-4">
                        <i class="fas fa-paper-plane fa-3x text-primary mb-3"></i>
                        <h5>验证邮件已发送</h5>
                        <p class="text-muted">我们已向 <strong>{{ email }}</strong> 发送了验证邮件</p>
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>请注意：</strong>
                        <ul class="list-unstyled mt-2 mb-0">
                            <li>• 请检查您的邮箱收件箱</li>
                            <li>• 如果没有收到，请检查垃圾邮件文件夹</li>
                            <li>• 验证链接将在24小时后过期</li>
                        </ul>
                    </div>
                    
                    <div class="mt-4">
                        <p class="text-muted mb-3">没有收到邮件？</p>
                        <form id="resendForm" class="d-inline">
                            <input type="hidden" name="email" value="{{ email }}">
                            <button type="submit" class="btn btn-outline-primary" id="resendBtn">
                                <i class="fas fa-redo"></i> 重新发送验证邮件
                            </button>
                        </form>
                    </div>
                    
                    <div class="mt-4">
                        <a href="{{ url_for('login') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> 返回登录
                        </a>
                        <a href="{{ url_for('index') }}" class="btn btn-primary ml-2">
                            <i class="fas fa-home"></i> 返回首页
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('resendForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const resendBtn = document.getElementById('resendBtn');
    const originalText = resendBtn.innerHTML;
    
    // 禁用按钮并显示加载状态
    resendBtn.disabled = true;
    resendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 发送中...';
    
    const formData = new FormData(this);
    
    fetch('{{ url_for("resend_verification") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            email: formData.get('email')
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 显示成功消息
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show mt-3';
            alertDiv.innerHTML = `
                <i class="fas fa-check-circle"></i> ${data.message}
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            `;
            document.querySelector('.card-body').appendChild(alertDiv);
            
            // 30秒后才能再次发送
            let countdown = 30;
            resendBtn.innerHTML = `<i class="fas fa-clock"></i> ${countdown}秒后可重新发送`;
            
            const timer = setInterval(() => {
                countdown--;
                if (countdown > 0) {
                    resendBtn.innerHTML = `<i class="fas fa-clock"></i> ${countdown}秒后可重新发送`;
                } else {
                    clearInterval(timer);
                    resendBtn.disabled = false;
                    resendBtn.innerHTML = originalText;
                }
            }, 1000);
        } else {
            // 显示错误消息
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-3';
            alertDiv.innerHTML = `
                <i class="fas fa-exclamation-circle"></i> ${data.message}
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
            `;
            document.querySelector('.card-body').appendChild(alertDiv);
            
            // 恢复按钮
            resendBtn.disabled = false;
            resendBtn.innerHTML = originalText;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        
        // 显示网络错误消息
        const alertDiv = document.createElement('div');
        alertDiv.className = 'alert alert-danger alert-dismissible fade show mt-3';
        alertDiv.innerHTML = `
            <i class="fas fa-exclamation-triangle"></i> 网络错误，请稍后重试
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        `;
        document.querySelector('.card-body').appendChild(alertDiv);
        
        // 恢复按钮
        resendBtn.disabled = false;
        resendBtn.innerHTML = originalText;
    });
});
</script>
{% endblock %}